<template>
  <!-- 新增部门的弹层 -->
  <a-modal
    :title="formData.id ? '编辑部门' : '新增部门'"
    @ok="btnOK"
    @cancel="closeDialog"
    v-model:visible="isShowDialog"
  >
    <a-form ref="formRef" :labelCol="{ span: 5 }">
      <a-form-item label="部门名称" v-bind="validateInfos.name">
        <a-input
          @blur="validate('name', { trigger: 'blur' }).catch(() => {})"
          v-model:value="formData.name"
          placeholder="1-50个字符"
        />
      </a-form-item>
      <a-form-item label="部门编码" v-bind="validateInfos.code">
        <a-input
          @blur="validate('code', { trigger: 'blur' }).catch(() => {})"
          v-model:value="formData.code"
          placeholder="1-50个字符"
        />
      </a-form-item>
      <a-form-item label="部门负责人" v-bind="validateInfos.manager">
        <a-select
          v-model:value="formData.manager"
          placeholder="请选择"
          @focus="getEmployeeSimpleFn"
        >
          <a-select-option
            v-for="item in peoples"
            :key="item.id"
            :label="item.username"
            :value="item.username"
          />
        </a-select>
      </a-form-item>
      <a-form-item label="部门介绍" v-bind="validateInfos.introduce">
        <a-textarea v-model:value="formData.introduce" placeholder="1-300个字符" :rows="3" />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script setup>
import { Form } from 'ant-design-vue'
import { computed, reactive, ref } from 'vue'
import { getDepartment, addDepartment, getDepartDetail, updateDepartment } from '@/api/department'
import { getEmployeeSimple } from '@/api/employee'

const props = defineProps({
  showDialog: {
    type: Boolean,
    default: false
  },
  // 当前操作的节点
  treeNode: {
    type: Object,
    default: null
  }
})

const emits = defineEmits(['refreshList', 'update:showDialog'])

const isShowDialog = computed({
  get: () => props.showDialog,
  set: (val) => emits('update:showDialog', val)
})

const formData = ref({
  name: '', // 部门名称
  code: '', // 部门编码
  manager: '', // 部门管理者
  introduce: '' // 部门介绍
})

// 检查部门重复
const checkNameRepeat = async (rule, value) => {
  // 先要获取最新的组织架构数据
  const { depts } = await getDepartment()
  // depts是所有的部门数据
  // 如何去找技术部所有的子节点
  let isRepeat = false
  if (formData.value.id) {
    // 有id就是编辑模式
    // 编辑 张三 => 校验规则 除了我之外 同级部门下 不能有叫张三的
    isRepeat = depts
      .filter((item) => item.id !== formData.value.id && item.pid === props.treeNode.pid)
      .some((item) => item.name === value)
  } else {
    // 没id就是新增模式
    isRepeat = depts
      .filter((item) => item.pid === props.treeNode.id)
      .some((item) => item.name === value)
  }
  return isRepeat ? Promise.reject(`同级部门下已经有${value}的部门了`) : Promise.resolve()
}

// 检查编码重复
const checkCodeRepeat = async (rule, value) => {
  // 先要获取最新的组织架构数据
  const { depts } = await getDepartment()
  let isRepeat = false
  if (formData.value.id) {
    // 编辑模式  因为编辑模式下 不能算自己
    isRepeat = depts.some((item) => item.id !== formData.value.id && item.code === value && value)
  } else {
    // 新增模式
    isRepeat = depts.some((item) => item.code === value && value) // 这里加一个 value不为空 因为我们的部门有可能没有code
  }
  return isRepeat
    ? Promise.reject(new Error(`组织架构中已经有部门使用${value}编码`))
    : Promise.resolve()
}

// rules 需要定义成响应式数据
const rules = reactive({
  name: [
    { required: true, message: '部门名称不能为空', trigger: 'blur' },
    { min: 1, max: 50, message: '部门名称要求1-50个字符', trigger: 'blur' },
    { validator: checkNameRepeat, trigger: 'blur' }
  ],
  code: [
    { required: true, message: '部门编码不能为空', trigger: 'blur' },
    { min: 1, max: 50, message: '部门编码要求1-50个字符', trigger: 'blur' },
    { validator: checkCodeRepeat, trigger: 'blur' }
  ],
  manager: [{ required: true, message: '部门负责人不能为空', trigger: 'blur' }],
  introduce: [
    { required: true, message: '部门介绍不能为空', trigger: 'blur' },
    { trigger: 'blur', min: 1, max: 300, message: '部门介绍要求1-50个字符' }
  ]
})
// resetFields    重置表单
// validate       校验表单
// validateInfos  校验信息(用于模板绑定)
const { resetFields, validate, validateInfos } = Form.useForm(formData, rules)

const closeDialog = () => {
  // 1. 清空表单数据
  formData.value = {
    name: '',
    code: '',
    manager: '',
    introduce: ''
  }
  // 2. 清空表单校验
  resetFields()
  // 3. 确保弹窗已经关闭
  emits('update:showDialog', false)
}

const btnOK = async () => {
  try {
    await validate() // 校验表单
    if (formData.value.id) {
      // 编辑模式
      updateDepartment(formData.value)
    } else {
      // 新增模式
      await addDepartment({
        ...formData.value,
        // 调用新增接口 添加父部门的id
        pid: props.treeNode.id
      })
    }
    emits('refreshList') // 更新数据
    closeDialog() // 关闭弹窗
  } catch (error) {
    console.log(error)
  }
}

// 部门负责人数据
const peoples = ref([])
const getEmployeeSimpleFn = async () => {
  peoples.value = await getEmployeeSimple()
}

const getDepartDetailFn = async (id) => {
  formData.value = await getDepartDetail(id)
}

defineExpose({
  getDepartDetailFn
})
</script>
